<template>
	<main class="resoucebox">
<<<<<<< HEAD
		<!--<el-row :gutter="20">
=======
		<el-row :gutter="20" class="headerbox">
>>>>>>> 940ceb82b6c61b0aac9e28e272ad9bfbed4c02cf
		  <el-col :span="6">
		  	<div class="grid-content bg-purple">
		  		<select class="resbox"  v-model="item.resourcetype">
		  			<option  value="1" selected="selected">会议室</option>
		  			<option  value="2">麦克风</option>
		  			<option  value="3">音响</option>
		  			<option  value="4">黑板</option>
		  			<option  value="5">资源</option>
		  		</select>
		  	</div>
		  </el-col>
		  <el-col :span="6">
		  	<div class="grid-content bg-purple"></div>
		  </el-col>
		  <el-col :span="6">
		  	<div class="grid-content bg-purple"></div>
		  </el-col>
		</el-row>
		
		<div class="changebox" >
			<div class="typebox"   v-show="cur==0">
		      <transition name="el-zoom-in-center" v-for="(item,index) in content1">
		        <div  class="transition-box" >{{item}}</div>
		      </transition>
		    </div>
		    <div class="typebox"   v-show="cur==1">
		      <transition name="el-zoom-in-center" v-for="(item,index) in content2">
		        <div  class="transition-box">{{item}}</div>
		      </transition>
		    </div>
		    <div class="typebox"  v-show="cur==2">
		    	<transition name="el-zoom-in-center" v-for="(item,index) in content3">
		    		<div class="transition-box">{{item}}</div>
		    	</transition>
		    </div>
		    <div class="typebox"   v-show="cur==3">
		      <transition name="el-zoom-in-center" v-for="(item,index) in content4">
		        <div  class="transition-box">{{item}}</div>
		      </transition>
		    </div>
<<<<<<< HEAD
		</div>-->
=======
		    <div class="typebox" v-show="cur==4">
		    	<transition name="el-zoom-in-center" v-for="(item,index) in content5">
		    		<div class="transition-box">{{item}}</div>
		    	</transition>
		    </div>
		</div>
>>>>>>> 940ceb82b6c61b0aac9e28e272ad9bfbed4c02cf
	</main>
</template>

<script>
	export default{
		data(){
			return{
				cur:'0', //默认选中第一个tab
				item:{
					resourcetype:''
				},
				content1:["会议室1","会议室2","会议室3","会议室4","会议室5","会议室6"],
				content2:["音响1","音响2","音响3","音响4","音响5","音响6"],
				content3:["麦克风1","麦克风2","麦克风3","麦克风4","麦克风5","麦克风6"],
				content4:["黑板1","黑板2","黑板3","黑板4","黑板5","黑板6"],
				content5:["资源1","资源2","资源3","资源4","资源5","资源6"]
			}
		},
		methods:{
			change(i){
				console.log(i)
			},
		}
	}
</script>

<style scoped="scoped">
	.resoucebox{
		width: 90%;
		margin: 0 auto;
		/*background: green;*/
	}
	.headerbox{
		margin-top: 10px;
	}
	/*改变框的长度*/
	.el-col-6{
		width: 28%;
	}
	.el-row {
	    margin-bottom: 20px;
	    box-sizing: border-box;
	    &:last-child {
	      margin-bottom: 0;
	    }
	}
  	.el-col {
    	border-radius: 4px;
  	}
  	.bg-purple-dark {
    	background: #99a9bf;
  	}
  	.bg-purple {
    	background: #d3dce6;
  	}
  	.bg-purple-light {
    	background: #e5e9f2;
  	}
  	.grid-content {
    	border-radius: 4px;
    	min-height: 36px;
  	}
  	.row-bg {
    	padding: 10px 0;
    	background-color: #f9fafc;
  	}
  	.grid-content{
  		text-align: center;
  	}
  	.resbox{
  		width: 60%;
  		height: 30px;
  		outline: none;
  		/*border-radius: 2rem;*/
  	}
  	.transition-box {
	    margin-bottom: 10px;
	    width: 200px;
	    height: 100px;
	    border-radius: 4px;
	    background-color: #409EFF;
	    text-align: center;
	    color: #fff;
	    padding: 40px 20px;
	    box-sizing: border-box;
	    margin-right: 20px;
	}
  	.typebox{
  		display: flex;
  		flex-wrap:wrap; 
  		width: 65%;
  		margin-top: 20px; 
  		height: auto;
  		background: bisque;
  	}
  	
  
</style>